<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>请假详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div v-if="detailOption">
          <div class="leave-body">
            <div class="leave-list">
              <div class="leave-list-l">
                <span>请假状态</span>
                <span :style="{color:statusLineColor[detailOption.status]}">{{ statusLine[detailOption.status] }}</span>
              </div>
              <div class="leave-list-l">
                <span>{{ detailOption.status == 2 ? '驳回理由' : '' }}</span>
                <span>{{ detailOption.status == 2 ? detailOption.reject_content : '' }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>审批人</span>
                <span>{{ detailOption.examine_user?detailOption.examine_user.realname:'--' }}</span>
              </div>
              <div class="leave-list-l">
                <span>审批时间</span>
                <span>{{ detailOption.examine_time || '' }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>开始时间</span>
                <span>{{ detailOption.start_time }}</span>
              </div>
              <div class="leave-list-l">
                <span>结束时间</span>
                <span>{{ detailOption.end_time }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>请假事由</span>
                <span>{{ detailOption.content }}</span>
              </div>
              <div class="leave-list-l">
                <span>申请时间</span>
                <span>{{ detailOption.create_time }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>时长</span>
                <span>{{ detailOption.day }}{{ detailOption.cate.time_type==2?'小时':'天' }}</span>
              </div>
              <div class="leave-list-l">
                <span>请假类型</span>
                <span>{{ detailOption.cate.name }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>抄送人</span>
                <span>{{ detailOption.realName?detailOption.realName:'无' }}</span>
              </div>
              <div class="leave-list-l">
                <span>申请人</span>
                <span>{{ detailOption.user?detailOption.user.realname: '' }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>代班</span>
                <span>{{ detailOption.is_substitute?'需要':'不需要' }}</span>
              </div>
<!--              <div class="leave-list-l">-->
<!--                <span></span>-->
<!--                <span>{{ detailOption.user?detailOption.user.realname: '' }}</span>-->
<!--              </div>-->
            </div>
          </div>
          <div class="file-get-box">
            <el-divider>附件</el-divider>
            <template v-if="fileList.length">
            <div v-for="(item, index) in fileList" :key="index" class="file-get-body">
              <p class="file-get-list">
                {{ index + 1 }}.
                <btn_file :option="item"></btn_file>
              </p>
              <span class="deteilSpan" @click="deteleFn(index)" v-if="showFile">删除</span>
            </div>
            </template>
            <template v-else>
              <div class="not-data-line">暂无数据</div>
            </template>
            <uploadFileModle number="20" @getFile="getFile" ref="uploadFileModle" :sycnStatus="true"
                             fileType="interaction_add" :showfile="false" :fileListPush="getList" v-if="showFile"></uploadFileModle>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button @click.native="submitFileFn" size="small" type="primary" plain v-if="showFile">保存并上传附件</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {leaveDetail, signIndex, leaveEdit} from '@/api/admin/staffService'
import {mapGetters} from "vuex";

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: this.visible,
      statusLineColor: {
        0: '#f44336',
        1: 'rgb(0 199 5)',
        2: '#f44336',
        3: 'rgb(207 122 0)',
        4: 'rgb(0 199 5)'
      },
      statusLine: {
        0: '待审批',
        1: '通过',
        2: '驳回',
        3: '请假中',
        4: '已完成'
      },
      detailOption: null,
      signList: [],
      fileList: [],
      getList: [],
      showFile: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('userInfo:', this.userInfo)
        this.InitFn()
      } else {
        this.detailOption = null
        this.fileList = []
        this.getList = []
      }
    }
  },
  created() {
  },
  methods: {
    submitFileFn() {
      console.log(this.detailOption)
      if (!this.fileList.length) {
        this.$message.error('请上传附件')
        return
      }
      let that = this
      let data_ = {
        id: this.detailId,
        cate_id: this.detailOption.cate_id,// 	整型 	必填 	1 	- 	类型
        start_time: this.detailOption.start_time,// 	整型 	必填 	1 	- 	开始时间
        end_time: this.detailOption.end_time,// 	整型 	必填 	1 	- 	结束时间
        day: this.detailOption.day,// 	整型 	必填 	1 	- 	天数
        content: this.detailOption.content,// 	整型 	必填 	1 	- 	原因
        examine_user: this.detailOption.examine_user.id,
        file: JSON.stringify(that.fileList)
      }
      leaveEdit(data_).then(res => {
        console.log('附件',res)
        if(!res.code){
          this.$message.success(res.msg)
          this.getList = []
          this.InitFn()
        }else{
          this.$message.error(res.msg)
        }

      })
    },
    deteleFn(index) {
      let src_ = this.fileList[index].src
      console.log('this.getList:', this.getList)
      if (this.getList.length) {
        let index_ = 0
        for (let i in this.getList) {
          let item = this.getList[i]
          if (item.src === src_) {
            index_ = i
          }
        }
        console.log('index_,', index_)
        this.getList.splice(index_, 1)
        console.log(this.getList)
      }
      this.fileList.splice(index, 1)
    },
    getFile(option) {
      console.log('收到附件数据：', option)
      this.getList = this.getJson(option)
      let url_ = []
      for(let item of this.fileList){
        url_.push(item.src)
      }
      if (option) {
        for (let item of option) {
          if(url_.indexOf(item.src)===-1){
            this.fileList.push({
              name: item.name,
              src: item.src
            })
          }
        }
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 初始化
    InitFn() {
      leaveDetail({id: this.detailId}).then(res => {
        console.log('res:', res)
        if (res.vo.file) {
          this.fileList = JSON.parse(res.vo.file)
        }
        if(this.userInfo.id===res.vo.user.id && res.vo.status!==2&& res.vo.status!==5&& res.vo.status!==6){
          this.showFile = true
        }
        let a_ = []
        for(let item of res.vo.read_user){
          a_.push(item.realname)
        }
        res.vo.realName = a_.join(',')
        this.detailOption = res.vo
        // if (res.vo.cate_id === 1) {
        //   this.signListFn()
        // }
      })
    },
    signListFn() {
      signIndex({leave_id: this.detailId}).then(res => {
        console.log('signList:', res)
        this.signList = res.list.data
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 600px;
  height: 600px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}

.leave-body {
  border: 1px solid #DCDFE6;
}

.leave-list {
  display: flex;
  border-bottom: 1px solid #DCDFE6;
}

.leave-list:last-child {
  border-bottom: none;
}

.leave-list-l {
  flex: 1;
  border-right: 1px solid #DCDFE6;
  display: flex;
}

.leave-list-l:last-child {
  border-right: none;
}

.leave-list-l span {
  padding: 10px;
}

.leave-list-l span:first-child {
  display: block;
  width: 78px;
  border-right: 1px solid #DCDFE6;
  padding: 10px;
}

.leave-list-l span:last-child {
  flex: 1;
}

.signBox {
  padding: 10px;
  text-align: center;
  color: #ddd;
}

.file-get-list {
  display: flex;
  padding: 5px;
  background: #eee;
  border-radius: 4px;
  align-items: center;
  flex: 1;
}

.file-get-body {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.deteilSpan {
  padding: 0 10px;
  font-size: 12px;
}
.not-data-line{
  text-align: center;
  color: #999;
}
</style>
